<template>
  <!-- 头部 -->
  <header class="header">
    <div class="nation">
      <a href="#">国内版</a>
      <a href="#">国际版</a>
    </div>
    <div class="search clear">
      <div class="searchL">
        <a href="#"></a>
        <div>
          <input type="text" value="vue" />
        </div>
      </div>
      <div class="searchR">
        <button>登录</button>
        <a href="#"></a>
      </div>
    </div>
    <nav>
      <ul>
        <li>网页</li>
        <li v-on:click="n = 2" :class="n == 2 ? 'sel' : ''">图片</li>
        <li v-on:click="n = 1" :class="n == 1 ? 'sel' : ''">视频</li>
        <li>学术</li>
        <li>词典</li>
        <li>地图</li>
      </ul>
      <div>
        <span>页面标题：</span>
        <b>自动</b>
        <span>筛选器</span>
        <img
          src=""
          alt=""
        />
      </div>
    </nav>
    <div class="fgx"></div>
    <!-- 选项-》视频 -->
    <Video v-show="n === 1"></Video>
    <!-- 选项-》图片 -->
    <X v-show="n === 2"></X>
  </header>
</template>
<style lang="scss">
//公共样式
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
// 头部
.header {
  padding-top: 18px;
  width: 100%;
  .nation {
    margin-left: 180px;
    margin-bottom: 4px;
    width: 200px;
    a {
      font-size: 13px;
      color: #666;
      display: inline-block;
      width: 67px;
      height: 25px;
      text-align: center;
      line-height: 25px;
    }
    a:first-child {
      border-radius: 12px;
      background-color: #e6f2f5;
    }
  }
  // 搜索处
  .search {
    width: 100%;
    height: 48px;
    overflow: hidden;
    .searchL {
      float: left;
      width: 810px;
      height: 100%;
      a {
        text-align: left;
        vertical-align: top;
        position: relative;
        display: inline-block;
        width: 116px;
        height: 18px;
        margin-top: 15px;
        text-indent: 0;
        overflow: hidden;
        direction: ltr;
        transform: none;
        margin: 10px 20px;
      }
      a:after {
        width: 140px;
        height: 18px;
        content: url('https://cn.bing.com/rp/eF3rIdIG4fsLyPy7mzgRnjCDKIA.png');
        position: relative;
        display: inline-block;
        transform-origin: -594px -80px;
        transform: scale(0.5);
      }
      div {
        float: right;
        input {
          width: 650px;
          height: 45px;
          border-radius: 24px;
          outline: none;
          border: 1px solid #ddd;
          padding-left: 15px;
          box-sizing: border-box;
          box-shadow: 3px 3px 3px #ddd;
          font-size: 17px;
          &:hover {
            box-shadow: 3px 3px 10px #ddd;
          }
        }
      }
    }
    .searchR {
      float: right;
      margin-right: 50px;
      margin-top: 15px;
      button {
        color: #666;
        background-color: #f5f5f5;
        width: 58px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        outline: none;
        border: 1px solid #eee;
      }
      a {
        width: 24px;
        height: 14px;
        display: inline-block;
        margin-left: 20px;
        background: url('https://cn.bing.com/rp/eF3rIdIG4fsLyPy7mzgRnjCDKIA.png') -198px
          0;
      }
    }
  }
  nav {
    width: 1340px;
    height: 40px;
    margin-left: 160px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    ul {
      display: flex;
      li {
        padding: 0 8px;
        height: 30px;
        line-height: 30px;
        border-bottom: 3px solid transparent;
        cursor: pointer;
        margin: 0 12px;
        &:hover {
          border-color: #ccc;
        }
      }
      .sel {
        border-bottom: 3px solid #00809d;
      }
    }
    div {
      margin-top: 10px;
      font-size: 13px;
      span {
        margin: 0 10px;
      }
    }
  }
  .fgx {
    width: 100%;
    border-bottom: 1px solid #ddd;
  }
}
</style>
<script>
export default {
  components: {
    Video: require('./Video.vue').default,
    X: require('./X.vue').default,
  },
  data() {
    return {
      n: 1,
    }
  },
}
</script>
